<template>
    <div>
        <div v-if="edit">
            <ul v-if="classifylist.length > 0">
                <li
                    v-for="item in classifylist"
                    :key="item.season_id || item.id"
                    @click.stop="choose(item.id)"
                >
                    <van-image
                        width="26.5vw"
                        height="36.5vw"
                        class="img"
                        fit="cover"
                        :src="`${item.vertical_cover}`"
                    />
                    <h3>{{ item.title }}</h3>
                    <p v-if="read">
                        {{
                            read.filter((v) => v.comicid == item.id).length > 0
                                ? "看到" +
                                  item.ep_list.filter(
                                      (v) =>
                                          v.id ==
                                          read.filter((v) => v.comicid == item.id)[0].ep_list[
                                              read.filter((v) => v.comicid == item.id)[0].ep_list
                                                  .length - 1
                                          ]
                                  )[0].ord +
                                  "话"
                                : "未看"
                        }}
                        /{{ item.last_short_title }}话
                    </p>
                    <p v-else>未看/{{ item.last_short_title }}话</p>
                    <div v-if="!item.checked" class="round"></div>
                    <div v-else class="choose">
                        <img src="../assets/images/choose.png" alt="" />
                    </div>
                    <span v-if="item.last_ord == item.total">END</span>
                </li>
            </ul>
        </div>

        <div v-else>
            <ul v-if="classifylist.length > 0">
                <router-link
                    tag="li"
                    class="mask"
                    :to="`/details/${item.season_id || item.id}`"
                    v-for="item in classifylist"
                    :key="item.season_id || item.id"
                >
                    <van-image
                        width="26.5vw"
                        height="36.5vw"
                        fit="cover"
                        :src="`${item.vertical_cover}`"
                    />
                    <h3>{{ item.title }}</h3>
                    <p v-if="read">
                        {{
                            read.filter((v) => v.comicid == item.id).length > 0
                                ? "看到" +
                                  item.ep_list.filter(
                                      (v) =>
                                          v.id ==
                                          read.filter((v) => v.comicid == item.id)[0].ep_list[
                                              read.filter((v) => v.comicid == item.id)[0].ep_list
                                                  .length - 1
                                          ]
                                  )[0].ord +
                                  "话"
                                : "未看"
                        }}
                        /{{ item.last_short_title }}话
                    </p>
                    <p v-else>未看/{{ item.last_short_title }}话</p>
                    <span v-if="item.last_ord == item.total">END</span>
                </router-link>
                <router-link tag="li" to="/classify">
                    <img src="../assets/images/addMore.png" alt="" />
                </router-link>
            </ul>
            <router-link v-else tag="div" to="/classify">
                <img src="../assets/images/addMore.png" alt="" />
            </router-link>
        </div>
    </div>
</template>

<script>
// import _ from "lodash";
export default {
    props: {
        classifylist: {
            type: Array,
            define: () => {
                return [];
            },
        },
        read: {
            type: Array,
            define: () => {
                return [];
            },
        },
        edit: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {};
    },
    created() {
        /* let readHistor = JSON.parse(localStorage.getItem("readLog"));
        if (!readHistor) {
            return;
        } */
    },
    methods: {
        choose(id) {
            this.$emit("choose", id);
        },
    },
};
</script>

<style lang="scss" scoped>
ul {
    display: flex;
    flex-wrap: wrap;
    li {
        position: relative;
        width: 30%;
        padding: 8px 5px;
        width: 27.5vw;
        .img {
            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 10;
                background: rgba(0, 0, 0, 0.4);
            }
        }
        span {
            position: absolute;
            top: 7px;
            left: 4px;
            background: #318afb;
            color: #fff;
            font-size: 12px;
            padding-left: 5px;
            z-index: 80;
            &::before {
                content: "";
                width: 0;
                height: 0;
                border-bottom: 22px solid transparent;
                border-left: 10px solid #318afb;
                position: absolute;
                right: -9px;
                top: 0;
            }
        }
        .round {
            width: 18px;
            height: 18px;
            border: 2px solid #999;
            border-radius: 50%;
            position: absolute;
            z-index: 100;
            top: 20px;
            right: 20px;
            img {
                width: 100%;
            }
        }
        .choose {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            position: absolute;
            z-index: 100;
            top: 20px;
            right: 20px;
            img {
                width: 100%;
            }
        }

        h3 {
            font-size: 14px;
            font-weight: bold;
            opacity: 0.8;
            color: #222;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        p {
            font-size: 12px;
            color: #999;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .addmore {
        width: 27.5vw;
        height: 36.5vw;
        padding-top: 5px;
        padding-left: 5px;
    }
}
.readHistor {
    position: relative;
    text-align: center;
    top: 150px;
}
.addmore {
    width: 27.5vw;
    height: 36.5vw;
    padding-top: 5px;
    padding-left: 5px;
}
.loading {
    position: relative;
    left: 0;
    right: 0;
    top: 100px;
}
</style>
